<template>
    <div>
        <CommonDialog :title="curRow.id ? '编辑菜品' : '新增菜品'" :dialogShow.sync="dialogShow" @makeSure="handleMakeSure">
            <template #content>
                <el-form :model="foodInfo" label-width="80px" :rules="rules">
                    <el-form-item prop="name" label="菜品名称">
                        <CommonInput v-model="foodInfo.name" :placeholder="'请输入菜品名称'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="categoryName" label="菜品分类">
                        <CommonInput v-model="foodInfo.categoryName" :placeholder="'请选择菜品分类'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="area" label="地区">
                        <CommonSelect v-model="foodInfo.area" :placeholder="'请选择地区'" :options="areaList">
                        </CommonSelect>
                    </el-form-item>
                    <el-form-item prop="price" label="价格">
                        <CommonInput v-model="foodInfo.price" :placeholder="'请输入菜品价格'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="stock" label="库存数量">
                        <CommonInput v-model="foodInfo.stock" :placeholder="'请输入库存数量'"></CommonInput>
                    </el-form-item>

                    <el-form-item prop="status" label="菜品状态">
                        <CommonSelect v-model="foodInfo.status" :placeholder="'请输入菜品状态'" :options="statusOptions">
                        </CommonSelect>
                    </el-form-item>
                    <el-form-item prop="taste" label="口味">
                        <CommonInput v-model="foodInfo.taste" :placeholder="'请输入口味，用逗号隔开'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="description" label="菜品描述">
                        <CommonInput v-model="foodInfo.description" :placeholder="'请输入菜品描述'" :type="'textarea'">
                        </CommonInput>
                    </el-form-item>
                    <el-form-item prop="img" label="图片" class="imgContent">
                        <!-- <el-image v-if="curRow.imageUrl" style="width: 148px; height: 148px;margin-right: 10px;"
                            :src="assetUrl + curRow.imageUrl" :preview-src-list="[assetUrl + curRow.imageUrl]"
                            :fit="'fill'">
                        </el-image> -->
                        <!-- <div class="imgBox">
                            <img v-if="curRow.imageUrl" style="width: 148px; height: 148px;margin-right: 10px;"
                                :src="assetUrl + curRow.imageUrl" />
                            <i class="el-icon-delete delIcon" v-if="showDel"></i>
                        </div> -->
                        <el-upload :headers="{
                            Authorization: token
                        }" :action="action" :fileList="fileList" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :limit='1' :on-remove="handleRemove"
                            :on-success="handleSuccess">

                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </template>
        </CommonDialog>
    </div>
</template>

<script>
import { uploadFile } from "@/api/foodManage"
export default {
    props: {
        curRow: {
            type: Object,
            default: () => { }
        },
        changeDialogShow: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        dialogShow: {
            get() {
                return this.changeDialogShow
            },
            set(v) {
                this.$emit('update:changeDialogShow', v)
            }
        }
    },
    created() {
        if (this.curRow.id) {
            this.fileList.push({
                name: 'aaa.jpg',
                url: process.env.VUE_APP_ASSETSURL + this.curRow.imageUrl
            })
            this.filePicList.push({
                name: 'aaa.jpg',
                url: process.env.VUE_APP_ASSETSURL + this.curRow.imageUrl
            })
        }

        this.token = localStorage.getItem('token').replaceAll('"', '')
        this.action = process.env.VUE_APP_BASE_API + '/file/upload'
        this.assetUrl = process.env.VUE_APP_ASSETSURL
        const keys = Object.keys(this.foodInfo)
        keys.forEach(key => {
            this.foodInfo[key] = this.curRow[key]
        })

    },
    data() {
        return {

            filePicList: [],
            uploadEl: null,
            fileList: [
                // {
                //     name: '111.jpg',
                //     url: 'http://liujiji.nat300.top/shareFile/1875485202084782080.jpg'
                // }
            ],
            showDel: false,
            assetUrl: "",
            action: '',
            token: '',
            statusOptions: [
                {
                    label: '在售',
                    value: 'available'
                },
                {
                    label: '下架',
                    value: 'unavailable'
                },
            ],
            foodInfo: {
                name: '',
                categoryName: '',
                price: '',
                stock: '',//库存数量
                description: '',//菜品描述
                imageId: '',
                status: '',
                taste: '',
                area: ''
            },
            areaList: [
                {
                    label: '昆明',
                    value: 'kunming'
                }, {
                    label: '曲靖',
                    value: 'qujing'
                }, {
                    label: '玉溪',
                    value: 'yuxi'
                }, {
                    label: '昭通',
                    value: 'zhaotong'
                }, {
                    label: '保山',
                    value: 'baoshan'
                }, {
                    label: '普洱',
                    value: 'puer'
                }, {
                    label: '临沧',
                    value: '临沧'
                }, {
                    label: '西双版纳',
                    value: 'xsbn'
                }, {
                    label: '大理自治州',
                    value: 'dali'
                }

            ],
            dialogImageUrl: '',
            dialogVisible: false,
            rules: {
                name: [
                    { required: true, message: '请输入菜品名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                categoryName: [
                    { required: true, message: '请选择菜品分类', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请输入菜品价格', trigger: 'blur' },
                ],
                description: [
                    { required: true, message: '请输入菜品描述', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '请选择菜品状态', trigger: 'blur' },
                ], area: [
                    { required: true, message: '请选择地区', trigger: 'blur' },
                ], taste: [
                    { required: true, message: '请输入口味', trigger: 'blur' },
                ],
            }
        };
    },

    mounted() {
        setTimeout(() => {
            this.uploadEl = document.querySelector('.el-upload--picture-card');
            const inputEl = document.querySelector('el-upload__input');
            this.uploadEl.addEventListener('click', (e) => {
                if (this.filePicList.length > 0) {
                    this.$message.error('只能上传一张图片')
                    e.preventDefault();
                }
            });
        }, 0)

    },

    methods: {
        async handleFileChange(e) {
            console.log(e.target.files[0]);
            let data = new File()
            Object.defineProperty(data, 'name', {
                value: e.target.files[0],

            });
            const res = await uploadFile(data)
            console.log(res, 'rse');

            // const file = e.file
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
            this.filePicList = []
            this.fileList = []
        },
        handlePictureCardPreview(file) {
            console.log(file);

            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleMakeSure() {
            if (this.curRow.id) {
                this.foodInfo.id = this.curRow.id
            }
            if (!this.foodInfo.imageId) {
                this.foodInfo.imageId = ''
            }
            console.log(this.foodInfo, 'fff');
            this.$emit('makeSure', this.foodInfo)
        },
        handleSuccess(res, file, fileList) {
            this.foodInfo.imageId = res.data.id
            console.log(fileList, 'fileList', file);
            this.filePicList.push({
                name: file.name,
                url: ''
            })
        }
    },
};
</script>
<style lang="less" scoped>
.imgContent {
    color: red;

    .imgBox {
        position: relative;
    }

    ::v-deep {
        .el-form-item__content {
            display: flex;
        }

        .delIcon {
            color: #e0e0e0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
        }
    }
}
</style>